<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet"  th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script th:src="@{/js/jquery-2.2.3.min.js}" charset="utf-8"></script>
    <link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
</head>
<body>
<style>
    /*登陆表单样式 start*/
    .wrap{
        width: 100%;
        height: 100%;
        background: url("/img/f72b99e252358215c81e297dd30d722.jpg") no-repeat;
        background-size: cover;
        z-index: 200;
    }

    .loginForm{
        margin-left: 35%;
        margin-top: 10%;
        /*background-color: #cccccc;*/
        /*background-color: #e7e7e7;*/
        width: 435px;
        height: 400px;
        float: left;
        z-index: 300;
        position: fixed;
        opacity: 0.75;
    }
    .registerPage{
        opacity: 0.75;
        z-index: -100;

    }


    .usernameDiv{
        width: 300px;
        height: 40px;
        padding-left: 130px;
        padding-top: 30px;

    }

    .adminInput{
        width: 200px;
        height: 40px;
        font-size: 15px;
        border-radius: 0.5em;
        /*margin-left: auto;*/
        /*border: 1px solid #cccccc;*/
    }
    .passwordDiv{
        width: 200px;
        height: 40px;
        padding-left: 130px;
        padding-top: 28px;
    }


    i{
        position: absolute;
    }
    .adminIcon{
        font-size: 22px;
        margin-top: 8px;
        margin-left: 165px;
    }
    .logoHead{
        width: 250px;
        height: 60px;
        padding-left: 90px;
        padding-top: 25px;
    }
    .usernameLabel{
        width: 60px;
        height: 30px;
        font-size: 16px;
        float: left;
        margin-left: 55px;
        margin-top: 40px;
    }
    .submitLabel{
        width: 160px;
        height: 30px;
        font-size: 13px;
        float: left;
        margin-left: 55px;
        margin-top: 40px;
        cursor: pointer;
    }
    .usernameWrapDiv{
        width: 400px;
        height: 70px;
    }
    .submitDiv{
        width: 150px;
        height: 40px;
        padding-left: 10px;
        padding-top: 28px;
        float: left;
    }
    .submit{
        width: 100px;
        height: 40px;
        border-radius: 0.5em;
    }
    img{
        position: absolute;
    }
    .imgStyle{
        width: 100%;
        height: 100%;
        z-index: 100;
    }
    /*登陆表单样式 end*/

    /*注册页面样式 start*/


</style>
<div>
    <img src="/img/f72b99e252358215c81e297dd30d722.jpg" class="imgStyle">
    <div class="loginForm" >
        <span th:text="${msg}" style="color:red"></span>
        <form>
            <!--            <div class="logoHead">-->
            <!--                <h2 style="margin-top: 15px;color: white;  word-break:keep-all;" >上海热线直播短视频快速发布平台</h2>-->
            <!--            </div>-->


            <div class="layui-form-item">
                <h2 style="margin-top: 15px;color: white;  word-break:keep-all;text-align: center" >上海热线直播互动平台</h2>
            </div>

            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label style="color: white">用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label style="color: white">密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                </div>
            </div>

            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label style="color: white">滑块验证:</label>
                </div>


                <div class="passwordDiv">

                    <div id="slider"></div>

                </div>
            </div>

            <div class="usernameWrapDiv">
                <!--                <div class="submitLabel">-->
                <!--                    <label>没有账号？<a href="#" id="loginRegister">点击注册</a></label>-->
                <!--                </div>-->
                <div class="submitDiv" >
                    <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录" style="margin-left: 150px;color: white"></input>
                </div>
            </div>
        </form>
    </div>
</div>
<!--<div class="registerPage" style="opacity: 0.5">-->
<!--    <div class="registerDiv">-->
<!--        <form>-->
<!--            <div class="usernameWrapDiv">-->
<!--                <div class="usernameLabel">-->
<!--                    <label>用户名:</label>-->
<!--                </div>-->
<!--                <div class="usernameDiv">-->
<!--                    <i class="layui-icon layui-icon-username adminIcon"></i>-->
<!--                    <input id="registerUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="usernameWrapDiv">-->
<!--                <div class="usernameLabel">-->
<!--                    <label>密码:</label>-->
<!--                </div>-->
<!--                <div class="passwordDiv">-->
<!--                    <i class="layui-icon layui-icon-password adminIcon"></i>-->
<!--                    <input id="registerPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="usernameWrapDiv">-->
<!--                <div class="usernameLabel">-->
<!--                    <label>滑块验证:</label>-->
<!--                </div>-->
<!--                <div class="passwordDiv">-->

<!--                    <div id="slider2"></div>-->

<!--                </div>-->
<!--            </div>-->


<!--        </form>-->
<!--    </div>-->
<!--</div>-->

<script>
    layui.config({
        base: '/dist/sliderVerify/'　　//注意sliderVerify.js文件路径
    }).use(['sliderVerify', 'jquery', 'form'], function() {
        var sliderVerify = layui.sliderVerify;
        form = layui.form;

        slider = sliderVerify.render({
            elem: '#slider'

        })
        slider_two= sliderVerify.render({
            elem: '#slider2',

        })
    })
    layui.use(['layer'],function () {
        var layer = layui.layer;
    })
    $(function () {


        // 登陆事件
        $('#loginBtn').click(function () {
            login();
        });
        // 注册事件
        $('#loginRegister').click(function () {
            register();
        });
    });

    // 校验验证码、用户名、密码
    function validateCode(inputID,codeID) {
        var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}');

        var loginUsername = $('#loginUsername').val();
        var loginPassword = $('#loginPassword').val();
        if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
            layer.alert("用户名不能为空");
            return false;
        }
        if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
            layer.alert("密码不能为空");
            return false;
        }


        if(!slider.isOk()){//用于表单验证是否已经滑动成功
            layer.msg("请先通过滑块验证");
            return false;
        }

        return true;
    }

    // 校验注册验证码、用户名、密码
    function validateCode2(inputID,codeID) {
        var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}');
        var loginUsername = $('#registerUsername').val();
        var loginPassword = $('#registerPassword').val();
        if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
            layer.alert("用户名不能为空");
            return false;
        }
        if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
            layer.alert("密码不能为空");
            return false;
        }

        if (!pwdRegex.test(loginPassword)) {
            layer.alert("您的密码复杂度太低（密码中必须包含字母、数字 至少8位），请及时修改密码！");
            return  false
        }
        if(!slider_two.isOk()){//用于表单验证是否已经滑动成功
            layer.msg("请先通过滑块验证");
            return false;
        }



        return true;
    }




    // 登录流程
    function login() {
        if (!validateCode('#loginCard','#loginCode')){
            //阻断提示
        }else {
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            var loginLoadIndex = layer.load(2);
            $('#loginBtn').val("正在登录...");
            $.ajax({
                url: '/login',
                type: "POST",
                traditional: true,
                data: {
                    "username": loginUsername,
                    "password": loginPassword,
                },
                success:function (data) {
                    layer.close(loginLoadIndex);
                    console.log(data)
                    if (data==0){  window.location.href = "/hudong/index";}
                    else{ layer.alert(data)
                    }
                    // window.open("/adminindex");
                },
                error:function () {
                    layer.close(loginLoadIndex);
                    $('#loginBtn').val("登录");
                }
            });
        }

    }
    // // 注册流程
    // function register() {
    //     layer.open({
    //         type: '1',
    //         content: $('.registerPage'),
    //         title: '注册',
    //
    //         area: ['430px', '400px'],
    //         btn: ['注册', '重置', '取消'],
    //         closeBtn: '1',
    //         btn1: function (index, layero) {
    //             if (!validateCode2('#loginCard2', '#loginCode2')) {
    //                 //阻断提示
    //             } else {
    //                 //注册回调
    //                 layer.close(index);
    //                 var registerUsername = $('#registerUsername').val();
    //                 var registerPassword = $('#registerPassword').val();
    //                 var registerWellPassword = $('#registerWellPassword').val();
    //                 var selectValue = $('#roleSelect option:selected').val();
    //                 $.ajax({
    //                     url: '/register',
    //                     type: "POST",
    //                     traditional: true,
    //                     data: {
    //                         "username": registerUsername,
    //                         "password": registerPassword,
    //                     },
    //                     success:function (data) {
    //                         if (data==0){
    //                             layer.msg("注册成功");
    //                         }
    //                         else{
    //                             layer.msg(data)
    //                         }
    //                     },
    //                     error:function () {
    //
    //                         layer.close(registerLoadIndex);
    //
    //                         $('#loginBtn').val("注册");
    //                     }
    //                 });
    //             }
    //         },
    //         btn2: function (index, layero) {
    //             //重置回调
    //             var registerUsername = $('#registerUsername').val("");
    //             var registerPassword = $('#registerPassword').val("");
    //             var registerWellPassword = $('#registerWellPassword').val("");
    //             // 防止注册页面关闭
    //             return false;
    //         },
    //         btn3: function (index, layero) {
    //             //取消回调
    //         }
    //     })
    // }

</script>

</body>

</html>
